<template>

  <div class="box">
    <el-header style="background-color:rgba(0, 0, 0, 0.6)">
      <span><img src="../assets/logo.png" alt="">电商后台管理系统</span>
      <button @click="exit">退出</button>
    </el-header>

    <el-container>
      <vue-particles class="login-bg" color="#39AFFD" :particleOpacity="0.7" :particlesNumber="100" shapeType="star"
        :particleSize="3" linesColor="#8DD1FE" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4"
        :linesDistance="150" :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push">
      </vue-particles>

      <div class="aside">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <el-menu router :default-active="this.$router.path" unique-opened class="el-menu-vertical-demo"
          @open="handleOpen" @close="handleClose" :collapse="isCollapse">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span slot="title">用户管理</span>
            </template>
            <el-menu-item index="/home/users"><i class="el-icon-view"></i>用户列表</el-menu-item>

          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span slot="title">权限管理</span>
            </template>
            <el-menu-item index="/home/roles"><i class="el-icon-view"></i>角色列表</el-menu-item>
            <el-menu-item index="/home/rights"><i class="el-icon-view"></i>权限列表</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-goods"></i>
              <span slot="title">商品管理</span>
            </template>
            <el-menu-item index="/home/list"><i class="el-icon-view"></i>商品列表</el-menu-item>
            <el-menu-item index="/home/cate"><i class="el-icon-view"></i>商品分类</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-guide"></i>
              <span slot="title">订单管理</span>
            </template>
            <el-menu-item index="/home/order"><i class="el-icon-view"></i>订单列表</el-menu-item>

          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-data"></i>
              <span slot="title">数据统计</span>
            </template>
            <el-menu-item index="/home/report"><i class="el-icon-view"></i>数据报表</el-menu-item>

          </el-submenu>
        </el-menu>
      </div>

      <el-container class="right">
        <router-view></router-view>
      </el-container>

    </el-container>



    <!-- <router-view ></router-view> -->

  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      scroll: null
    }
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse

    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    exit() {
      this.$router.push({
        path: '/login'
      })
    }
  },
}

</script>
<style scoped>

.toggle-button[data-v-fae5bece] {
  background-color: rgba(0, 0, 0, 0.5);
}

.el-submenu .el-menu-item {
  background-color: rgba(0, 0, 0, 0.4);
}

.el-menu[data-v-fae5bece] {
  background-color: rgba(0, 0, 0, 0.4);
}

.box {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #373d41;
  color: #fff;
  line-height: 60px;

}

.el-header button {
  width: 55px;
  height: 35px;
  border: 0;
  background-color: #909399;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.el-submenu__title i{
  color: #ccc;
}

.el-menu-item i{
  color: #ccc;
}
.el-menu--popup-right-start{
  background-color: rgba(0, 0, 0, 0.4);
}
::v-deep ul.el-menu.el-menu--popup.el-menu--popup-right-start{
  padding: 0;
}

.el-header button:hover {
  background-color: #a5a9b1;
}

.el-header span {
  font-size: 25px;
}

.el-header span img {
  display: inline-block;
  vertical-align: middle;

  margin-right: 15px;
  width: 45px;

}

.toggle-button {
  position: relative;
  z-index: 1;
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
  border: 1px solid #373d41;
}

.el-menu {
  background-color: #373d41;

  border: 0;
  height: 100%;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
}

.aside {
  background-color: #373d41;
  display: flex;
  flex-direction: column;
}


::v-deep .el-submenu__title {
  color: #fff;
}

::v-deep .el-submenu__title:hover {
  background-color: #55b1ee;
}

::v-deep .el-menu-item:focus,
.el-menu-item:hover {
  background-color: #55b1ee;
}

.el-menu-item {
  background-color: #373d41;
  color: #fff;
}

.el-menu-item.is-active {
  color: rgb(234, 247, 51);
}

.right {
  padding: 1em;
  background-color: #eaedf1;
  display: block;
  margin-left: 0px;
  margin-right: 0px;
  width: 100%;
  height: 94vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

.login-bg {
  background-color: #eee;
}

#particles-js {
  width: 100%;
  height: 100%;
  position: fixed;
}
</style>